window.onload = function(){
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    const margin = 20;
    const axis_center = {
        x: margin,
        y: canvas.height - margin
    }
    const axis_width = canvas.width - 2* margin;
    const axis_height = canvas.height - 2* margin;
    const spacing = 10;
    const main_width = 2,tick_width = 1,tick_height = 5,big_tick_height = 10;
    context.strokeStyle = 'lightgray';

    function drawVerticalLine(){
        context.lineWidth = main_width;
        context.beginPath();
        context.moveTo(axis_center.x,axis_center.y);
        context.lineTo(axis_center.x, margin)
        context.stroke();
    }
    
    function drawHorizenLine(){
        context.lineWidth = main_width;
        context.beginPath();
        context.moveTo(axis_center.x,axis_center.y);
        context.lineTo(axis_width+margin, axis_center.y)
        context.stroke();
    }


    function drawVerticalTicks(){
        const totalTicks = axis_height / spacing;
        for(var i = 1 ;i<=totalTicks;i++){
            context.beginPath();
            const height = i % 5 === 0 ? big_tick_height : tick_height;
            const lineWidth = i% 5 === 0 ? main_width : tick_width;
            context.lineWidth = lineWidth;
            context.moveTo(axis_center.x,axis_center.y - i* spacing);
            context.lineTo(axis_center.x + height,axis_center.y - i* spacing)
            context.stroke();
        }

    }

    function drawHorizenTicks(){
        const totalTicks = axis_width / spacing;
        for(var i = 1 ;i<=totalTicks;i++){
            context.beginPath();
            const height = i % 5 === 0 ? big_tick_height : tick_height;
            const lineWidth = i% 5 === 0 ? main_width : tick_width;
            context.lineWidth = lineWidth;
            context.moveTo(axis_center.x+ i* spacing,axis_center.y);
            context.lineTo(axis_center.x+ i* spacing,axis_center.y-height)
            context.stroke();
        }

    }
    drawVerticalLine();
    drawHorizenLine();
    drawVerticalTicks();
    drawHorizenTicks();
}